<template>
  <view class="container">
    <view class="post-detail">
      <view class="post-header">
        <view class="post-title">这是一个示例帖子标题</view>
        <view class="author-info">
          <view class="avatar"></view>
          <view class="info">
            <view class="name">张三</view>
            <view class="time">2小时前</view>
          </view>
        </view>
      </view>
      
      <view class="post-content">
        这是文章的详细内容，可以包含多个段落...
      </view>
      
      <view class="post-actions">
        <button class="btn primary" style="flex: 1;" @tap="handleLike">
          <text class="iconfont icon-like"></text>
          <text>点赞 (42)</text>
        </button>
        <button class="btn outline" style="flex: 1;" @tap="handleComment">
          <text class="iconfont icon-comment"></text>
          <text>评论 (15)</text>
        </button>
      </view>
      
      <view class="comments-section">
        <view class="section-title">评论 (15)</view>
        <view class="comment-list">
          <view class="comment-item" v-for="(comment, index) in comments" :key="index">
            <view class="avatar"></view>
            <view class="comment-content">
              <view class="name">{{ comment.author }}</view>
              <view class="text">{{ comment.content }}</view>
              <view class="time">{{ comment.time }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 评论输入框 -->
    <view class="comment-input">
      <input class="input" type="text" v-model="newComment" placeholder="添加评论..." />
      <button class="btn primary" style="width: auto; margin: 0;" @tap="submitComment">发送</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      newComment: '',
      comments: [
        {
          author: '李四',
          content: '这是一条评论...',
          time: '1小时前'
        }
      ]
    }
  },
  methods: {
    handleLike() {
      // TODO: 实现点赞功能
    },
    handleComment() {
      // 聚焦评论输入框
      this.$nextTick(() => {
        uni.createSelectorQuery().select('.comment-input input').focus()
      })
    },
    submitComment() {
      if (!this.newComment) {
        uni.showToast({
          title: '请输入评论内容',
          icon: 'none'
        })
        return
      }
      
      // TODO: 实现发送评论
      this.comments.unshift({
        author: '我',
        content: this.newComment,
        time: '刚刚'
      })
      this.newComment = ''
    }
  }
}
</script>

<style lang="scss">
@import '@/common/styles/common.scss';

.post-detail {
  padding: 24rpx;
  padding-bottom: 120rpx;
  
  .post-header {
    margin-bottom: 32rpx;
    
    .post-title {
      font-size: 40rpx;
      font-weight: bold;
      margin-bottom: 24rpx;
    }
    
    .author-info {
      display: flex;
      align-items: center;
      
      .info {
        margin-left: 16rpx;
        
        .name {
          font-size: 28rpx;
        }
        
        .time {
          font-size: 24rpx;
          color: $text-color-secondary;
        }
      }
    }
  }
  
  .post-content {
    font-size: 30rpx;
    line-height: 1.6;
    margin-bottom: 32rpx;
  }
  
  .post-actions {
    display: flex;
    gap: 24rpx;
    margin-bottom: 32rpx;
    
    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        margin-right: 8rpx;
      }
    }
  }
  
  .comments-section {
    .section-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 24rpx;
    }
    
    .comment-item {
      display: flex;
      margin-bottom: 24rpx;
      
      .comment-content {
        margin-left: 16rpx;
        flex: 1;
        
        .name {
          font-size: 28rpx;
          margin-bottom: 8rpx;
        }
        
        .text {
          font-size: 28rpx;
          color: $text-color;
        }
        
        .time {
          font-size: 24rpx;
          color: $text-color-secondary;
          margin-top: 8rpx;
        }
      }
    }
  }
}

.comment-input {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24rpx;
  background: #FFFFFF;
  border-top: 2rpx solid $border-color;
  display: flex;
  align-items: center;
  gap: 16rpx;
  
  .input {
    margin: 0;
  }
}
</style> 